<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/logo.png"/>
      </div>
      <el-form label-width="0px" class="login_form" :model="login_form" :rules="login_rules" ref="relusForm">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-coordinate" v-model="login_form.telPhone"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="login_form.passWord"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="loginForm">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    // 表单数据绑定，data数据加载页面数据
    data() {
      return {
        login_form: {
          telPhone: '18005699661',
          passWord: '123456'
        },
        // 表单规则验证绑定
        relusForm: {
          telPhone: '',
          passWord: ''
        },
        // 表单具体验证规则
        login_rules: {
          telPhone: [
            {required: true, message: '请输入手机', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 11 个字符', trigger: 'blur'}
          ],
          passWord: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 重置方法
      resetLoginForm() {
        this.$refs.relusForm.resetFields();
      },
      // 登录方法，先进行规则验证
      loginForm() {
        this.$refs.relusForm.validate(async valid => {
          if (!valid) {
            return false;
          }
          // 使用axios进行post提交到服务器，参数封装在login_form对象中
          var {data: res} = await this.$http({
            headers: {
              'Content-Type': 'application/json'
            },
            method: 'post',
            url: 'http://localhost:9001/user/client/selectUser',
            data: JSON.stringify(this.login_form)
          });
          if (res.code == '000000') {
            this.msg.success('登录成功');
            console.log(res.queryList[0].userId);
            window.sessionStorage.setItem('token', res.queryList[0].userId);
            this.$router.push('/index');
          } else if (res.totalCount == 0) {
            this.msg.error('用户不存在，请重新登录');
          }
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      background-color: #fff;
      box-shadow: 0 0 10px #ddd;
    }

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
</style>
